<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>权限管理</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
    <style>
        * {
            margin: 0px;
        }

        .el-header {
            /*background-color: #B3C0D1;*/
            background-color: #99CCCC;
            color: #333;
        }

        .el-aside {
            /*#D3DCE6;*/
            background-color: #545c64;
            color: #333;
            text-align: center;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            height: 880px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .asideModel {
            height: 160px;
        }

        a {
            text-decoration: none;
        }

        .logoImg {
            float: left;
            width: 180px;
            height: 90px;
            margin: 30px 30px 10px 30px;
            opacity: 0.85;
        }

        .mainBtn123 {
            /*float: left;*/
            width: 180px;
            height: 40px;
            margin: 0px 30px 30px 30px;
        }

        .link {
            margin: 10px 0px 0px 0px;
            height: 50px;
        }

        .changespan {
            text-align: right;
            margin-right: -20px;
        }

        .outspan {
            text-align: right;
            padding-right: 20px;
        }

        .headImg {
            float: right;
            border: 2px solid lightslategray;
            margin-top: 10px;
            margin-right: 10px;
        }

        .username {
            float: right;
            line-height: 70px;
        }

        .el-tabs--border-card {
            height: 100%;
        }

        .el-submenu .el-menu-item {
            color: #99CCCC !important;
        }

        .el-menu-item.is-active {
            color: #ffd04b !important;
        }

        .el-table {
            margin: 10px auto;
        }

        .el-table .cell {
            text-align: center;
        }

        .tableHead {
            text-align: left;
            font-size: 22px;
            margin: 20px 0px 0px 60px;
        }

        .el-select {
            width: 100%;
        }

        .el-button el-button--primary {
            margin-left: 20px;
        }

        .el-form-item__content {
            text-align: left;
        }

        .el-dialog {
            width: 34%;
        }

        .el-dialog__footer {
            text-align: center;
        }

        .el-dialog__body {
            padding: 30px 100px;
        }

        /*.myInput{*/
        /*margin-top: 20px;*/
        /*}*/

    </style>
</head>
<body>
<div id="mydiv">
    <el-container>
        <el-aside width="240px">
            <!--系统名称和logo-->
            <div class="titleHead"><img class="logoImg" src="/secondStage/img/logo333.png"/>
                <a href="/secondStage/main.html">
                    <el-button type="primary" icon="el-icon-s-home" class="mainBtn123">首 页</el-button>
                </a>
            </div>
            <el-row class="tac">
                <el-col :span="24">
                    <el-menu default-active="201" class="el-menu-vertical-demo" @open="handleOpen"
                             @close="handleClose"
                             background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu :index="menus.pid" v-for="menus in usermenus">
                            <template slot="title">
                                <i :class="menus.glyphicon"></i>
                                <span>{{menus.pname}}</span>
                            </template>
                            <el-menu-item-group v-for="menu in menus.menuList">
                                <a :href="menu.url">
                                    <el-menu-item :index="menu.pid">
                                        <i :class="menu.glyphicon"></i>
                                        {{menu.pname}}
                                    </el-menu-item>
                                </a>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>

        </el-aside>
        <el-container>
            <el-header style="height: 60px">
                <el-row>
                    <!--头像-->
                    <el-col :span="5" :offset="15">
                        <span class="username">欢迎您：<strong>{{username}}</strong></span>
                        <el-avatar :size="45" :src="circleUrl" class="headImg"></el-avatar>
                    </el-col>
                    <el-col :span="2" class="changespan">
                        <el-link href="/secondStage/html/alterPassword.html" icon="el-icon-edit" class="link">修改密码
                        </el-link>
                    </el-col>
                    <el-col :span="2" class="outspan">
                        <el-link @click="islogout" icon="el-icon-switch-button" class="link">退出登录</el-link>
                    </el-col>

                </el-row>

            </el-header>
            <el-main>
                <!--导航栏-->
                <el-tabs type="border-card" v-model="activeName">
                    <el-tab-pane label="首页" disabled></el-tab-pane>
                    <el-tab-pane label="权限管理" name="authoriyManagement">
                        <p class="tableHead">用户列表&nbsp;<i class="el-icon-bottom-right"></i>&nbsp;&nbsp;&nbsp;<el-button
                                type="primary" icon="el-icon-circle-plus-outline" @click="addClick">新增用户
                        </el-button>
                        </p>
                        <!--此处应为每个页面不同的显示区域-->
                        <el-table :data="tableData" stripe style="width: 90%" :row-key="Math.random()">
                            <el-table-column prop="aid" label="编号" width="120"></el-table-column>
                            <el-table-column prop="aname" label="用户名" width="180"></el-table-column>
                            <el-table-column prop="role_id" label="角色" width="180"></el-table-column>
                            <el-table-column prop="reg_time" label="创建日期" width="240"></el-table-column>
                            <el-table-column prop="login_time" label="最后登录日期" width="240"></el-table-column>
                            <el-table-column prop="isvalid" label="状态" width="120">
                                <template slot-scope="scope">
                                    <el-tag
                                            :type="scope.row.isvalid === '有效' ? 'success' : 'info'"
                                            disable-transitions>{{scope.row.isvalid}}
                                    </el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button @click="editClick(scope.row)" type="text" size="small">编辑</el-button>
                                    <el-button @click="deleteClick(scope.row)" type="text" size="small"
                                               style="color: #F56C6C">删除
                                    </el-button>
                                    <el-button @click="authorityClick(scope.row)" type="text" size="small"
                                               style="color: #E6A23C">权限管理
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--分页组件-->
                        <el-pagination
                                background
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="1"
                                :page-sizes="[5, 10, 20]"
                                :page-size="5"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalCount">
                        </el-pagination>

                        <!--弹出编辑的模态框-->
                        <el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
                            <el-form :model="form">
                                <el-form-item label="用户编号" :label-width="formLabelWidth">
                                    <el-input v-model="form.aid" autocomplete="off" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="用户名" :label-width="formLabelWidth">
                                    <el-input v-model="form.aname" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="角色" :label-width="formLabelWidth">
                                    <el-select v-model="form.role" placeholder="请选择">
                                        <el-option label="管理员" value="1"></el-option>
                                        <el-option label="普通用户" value="2"></el-option>
                                        <el-option label="渠道" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="状态" :label-width="formLabelWidth">
                                    <el-select v-model="form.isvalid" placeholder="请选择">
                                        <el-option label="有效" value="1"></el-option>
                                        <el-option label="无效" value="0"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取 消</el-button>
                                <el-button type="primary" @click="submitTheEdit(form)">确 定</el-button>
                            </div>
                        </el-dialog>

                        <!--新增用户的模态框-->
                        <el-dialog title="新增用户信息" :visible.sync="dialogFormVisible2">
                            <el-form :model="form2">
                                <el-form-item label="用户名" :label-width="formLabelWidth">
                                    <el-input v-model="form2.aname" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="密码" :label-width="formLabelWidth">
                                    <el-input v-model="form2.apwd" type="password" autocomplete="off"></el-input>
                                </el-form-item>
                                <el-form-item label="角色" :label-width="formLabelWidth">
                                    <el-select v-model="form2.role" placeholder="请选择">
                                        <el-option label="管理员" value="1"></el-option>
                                        <el-option label="普通用户" value="2"></el-option>
                                        <el-option label="渠道" value="3"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="状态" :label-width="formLabelWidth">
                                    <el-select v-model="form2.isvalid" placeholder="请选择">
                                        <el-option label="有效" value="1"></el-option>
                                        <el-option label="无效" value="0"></el-option>
                                    </el-select>
                                </el-form-item>

                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible2 = false">取 消</el-button>
                                <el-button type="primary" @click="submitTheAdd(form2)">确 定</el-button>
                            </div>
                        </el-dialog>


                        <!--权限操作的模态框-->
                        <el-dialog title="用户权限管理" :visible.sync="dialogFormVisible3">
                            <el-form :model="form3">
                                <el-form-item label="用户编号" :label-width="formLabelWidth">
                                    <el-input v-model="form3.aid" autocomplete="off" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="用户名" :label-width="formLabelWidth">
                                    <el-input v-model="form3.aname" autocomplete="off" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="角色" :label-width="formLabelWidth">
                                    <el-input v-model="form3.role" autocomplete="off" readonly></el-input>
                                </el-form-item>
                                <el-form-item label="权限列表" :label-width="formLabelWidth">
                                    <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                    <el-tree
                                            :data="authorityDataTree"
                                            ref="authorityData"
                                            @check-change="getCheckedKeys"
                                            show-checkbox
                                            default-expand-all
                                            node-key="id"
                                            :expand-on-click-node="false"
                                            check-on-click-node
                                            :default-checked-keys="defaultCheckedKeys"
                                            :props="defaultProps">
                                        <!--:check-strictly="true"-->
                                        <!--@check="clickDeal"-->
                                    </el-tree>
                                </el-form-item>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible3 = false">取 消</el-button>
                                <el-button type="primary" @click="authoritySubmit">确 定</el-button>
                            </div>
                        </el-dialog>


                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#mydiv",
        data() {
            return {
                usermenus: "",
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                username: "",
                activeName: "authoriyManagement",
                tableData: [],
                dialogFormVisible: false,
                dialogFormVisible2: false,
                dialogFormVisible3: false,
                form: {
                    aid: '',
                    aname: '',
                    role: '',
                    isvalid: ''
                },
                form2: {
                    aname: '',
                    apwd: '',
                    role: '',
                    isvalid: ''
                },
                checkAll: false,
                checkedKeys: [],
                halfCheckedKeys: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                form3: {
                    aid: '',
                    aname: '',
                    role: '',
                    menu_id: ""
                },
                formLabelWidth: '80px',
                defaultCheckedKeys: [], // 默认选中的权限菜单
                authorityDataTree: [],
                // 分页组件
                page: "1",
                pageSize: "5",
                totalCount: "",
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                var param = 'method=getLimitAccount&page=' + this.page + '&pageSize=' + this.pageSize;
                console.log(param)
                this.refreshAdmin(param);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.page = val;
                var param = 'method=getLimitAccount&pageSize=' + this.pageSize + '&page=' + this.page;
                console.log(param)
                this.refreshAdmin(param);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleCheckAllChange() { // 全选框选择全部权限
                // console.log(this.checkAll)
                if (this.checkAll) {
                    this.$refs.authorityData.setCheckedNodes(this.authorityDataTree);
                } else {
                    this.$refs.authorityData.setCheckedKeys([]);
                }
            },
            editClick(row) {
                console.log(row);
                this.dialogFormVisible = true;
                this.form.aid = row.aid;
                this.form.aname = row.aname;
                this.form.role = row.role_id == '管理员' ? '1' : (row.role_id == '渠道' ? '3' : '2');
                this.form.isvalid = row.isvalid == '有效' ? '1' : '0';
            },
            addClick() {
                this.dialogFormVisible2 = true;
                this.form2.aname = '';
                this.form2.apwd = '';
                this.form2.role = '';
                this.form2.isvalid = '';
            },
            // 打开权限控制的模态框，给模态框输入项赋值
            authorityClick(row) {
                // 获得权限列表
                axios.post('/secondStage/showMenu', 'method=getAllMenu')
                    .then(response => {
                        // console.log(response);
                        this.authorityDataTree = response.data;
                    }).catch(function (error) {
                    console.log(error);
                });
                this.checkAll =  false;
                this.dialogFormVisible3 = true;
                this.form3.aid = row.aid;
                this.form3.aname = row.aname;
                this.form3.role = row.role_id;
                for (let i = 0; i < this.tableData.length; i++) {
                    if (row.aid == this.tableData[i].aid) {
                        this.$nextTick(() => {
                            console.log(this.tableData[i].menu_id);
                            if (this.tableData[i].menu_id != undefined) {
                                this.defaultCheckedKeys = this.tableData[i].menu_id.split(",");
                                console.log(this.defaultCheckedKeys);
                                this.$refs.authorityData.setCheckedKeys(this.defaultCheckedKeys);
                            } else {
                                this.defaultCheckedKeys = [];
                                this.$refs.authorityData.setCheckedKeys(this.defaultCheckedKeys);
                            }
                        });
                    }
                }
            },
            // // 关闭父子严格相关设置，实现父不关联子，子关联父
            // clickDeal(currentObj, treeStatus) {
            //     // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
            //     let selected = treeStatus.checkedKeys.indexOf(currentObj.menuId) // -1未选中
            //     // 选中
            //     if (selected !== -1) {
            //         // 子节点只要被选中父节点就被选中
            //         this.selectedParent(currentObj)
            //         // 统一处理子节点为相同的勾选状态
            //         this.uniteChildSame(currentObj, true)
            //     } else {
            //         // 未选中 处理子节点全部未选中
            //         if (currentObj.childs.length !== 0) {
            //             this.uniteChildSame(currentObj, false)
            //         }
            //     }
            // },
            // // 统一处理子节点为相同的勾选状态
            // uniteChildSame(treeList, isSelected) {
            //     this.$refs.authorityData.setChecked(treeList.menuId, isSelected)
            //     for (let i = 0; i < treeList.childs.length; i++) {
            //         this.uniteChildSame(treeList.childs[i], isSelected)
            //     }
            // },
            // // 统一处理父节点为选中
            // selectedParent(currentObj) {
            //     let currentNode = this.$refs.authorityData.getNode(currentObj)
            //     if (currentNode.parent.key !== undefined) {
            //         this.$refs.authorityData.setChecked(currentNode.parent, true)
            //         this.selectedParent(currentNode.parent)
            //     }
            // },
            // 监听change，得到选中和半选状态的key值
            getCheckedKeys() {
                this.checkedKeys = this.$refs.authorityData.getCheckedKeys();
                this.halfCheckedKeys = this.$refs.authorityData.getHalfCheckedKeys();
            },
            authoritySubmit() {
                this.dialogFormVisible3 = false;
                let authorityArr = this.checkedKeys.concat(this.halfCheckedKeys);
                let submit = "method=updateUserAuthority&aid=" + this.form3.aid + "&authorityArr=" + authorityArr;
                console.log(submit);
                axios.post('/secondStage/editAdmin', submit)
                    .then(response => {
                        console.log(response);
                        if (response.data.returnCode == 200) {
                            this.$message({
                                showClose: true,
                                message: '用户权限修改成功',
                                type: 'success',
                                center: true
                            });
                        } else {
                            this.$message({
                                showClose: true,
                                message: '用户权限修改失败，请重试或联系管理员',
                                type: 'error',
                                center: true
                            });
                        }
                        this.refreshAdmin('method=getLimitAccount&pageSize=' + this.pageSize + '&page=' + this.page);
                    }).catch(function (error) {
                    console.log(error);
                });
            },

            islogout() {
                this.$confirm('此操作将退出系统, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    location.href = "/secondStage/login?method=logout";
                });
            },
            submitTheEdit(editedForm) {
                this.dialogFormVisible = false;
                var submit = window.Qs.stringify(editedForm) + "&method=updateUserInfo";
                console.log(submit);
                axios.post('/secondStage/editAdmin', submit)
                    .then(response => {
                        console.log(response);
                        if (response.data.returnCode == 200) {
                            this.$message({
                                showClose: true,
                                message: '用户信息修改成功',
                                type: 'success',
                                center: true
                            });
                        } else {
                            this.$message({
                                showClose: true,
                                message: '用户信息修改失败，请重试或联系管理员',
                                type: 'error',
                                center: true
                            });
                        }
                        this.refreshAdmin('method=getLimitAccount&pageSize=' + this.pageSize + '&page=' + this.page);
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            submitTheAdd(addForm) {
                this.dialogFormVisible2 = false;
                var submit = window.Qs.stringify(addForm) + "&method=insertUserInfo";
                console.log(submit);
                axios.post('/secondStage/editAdmin', submit)
                    .then(response => {
                        console.log(response);
                        if (response.data.returnCode == 200) {
                            this.$message({
                                showClose: true,
                                message: '用户新增成功',
                                type: 'success',
                                center: true
                            });
                        } else {
                            this.$message({
                                showClose: true,
                                message: '用户新增失败，请重试或联系管理员',
                                type: 'error',
                                center: true
                            });
                        }
                        this.refreshAdmin('method=getLimitAccount&pageSize=' + this.pageSize + '&page=' + this.page);
                    }).catch(function (error) {
                    console.log(error);
                });
            },
            deleteClick(row) {
                console.log(row.aid);
                this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var submit = "method=deleteUserInfo&aid=" + row.aid;
                    axios.post('/secondStage/editAdmin', submit)
                        .then(response => {
                            console.log(response);
                            if (response.data.returnCode == 200) {
                                this.$message({
                                    showClose: true,
                                    message: '用户删除成功',
                                    type: 'success',
                                    center: true
                                });
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: '用户删除失败，请重试或联系管理员',
                                    type: 'error',
                                    center: true
                                });
                            }
                            this.refreshAdmin('method=getLimitAccount&pageSize=' + this.pageSize + '&page=' + this.page);
                        }).catch(function (error) {
                        console.log(error);
                    });
                });
            },
            // 异步请求获得用户权限信息，姓名和头像，以及刷新用户表单数据
            refreshAdmin(param) {
                axios.post('/secondStage/showMenu', param)
                    .then(response => {
                        console.log(response);
                        if (response.data.returnCode == 200) {
                            this.usermenus = response.data.returnData;
                            this.circleUrl = "/secondStage/" + response.data.returnAccount.aimg;
                            this.username = response.data.returnAccount.aname;
                            this.totalCount = response.data.pageInfo.totalCount;
                            var betterLimitAccount = response.data.pageInfo.adminUserList;
                            for (j = 0, len = betterLimitAccount.length; j < len; j++) {
                                betterLimitAccount[j].reg_time = new Date(betterLimitAccount[j].reg_time).toLocaleString();
                                betterLimitAccount[j].login_time = new Date(betterLimitAccount[j].login_time).toLocaleString();
                                betterLimitAccount[j].isvalid = betterLimitAccount[j].isvalid == 1 ? "有效" : "无效";
                                betterLimitAccount[j].role_id = betterLimitAccount[j].role_id == 1 ? "管理员" : (betterLimitAccount[j].role_id == 2 ? "普通用户" : "渠道");
                            }
                            this.tableData = betterLimitAccount;
                            console.log(this.tableData);
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        created() {
            this.refreshAdmin('method=getLimitAccount&pageSize=' + this.pageSize + '&page=' + this.page);
        }
    })
</script>
</html>
